<template>
  <view>
    <view class="notice-list">
      <view
        class="notice-item"
        v-for="item in noticeList"
        :key="item.id"
        @click="goDetail(item)"
      >
        <!-- <view class="notice-item-type">
				
					<view class="notice-item-type-text">预售通知</view>
				</view> -->
        <image style="width: 100%; height: 175rpx" :src="item.picture"></image>
        <view class="notice-item-title">
          <view class="am-text-eill notice-item-title-text">{{
            item.title
          }}</view>
        </view>
        <view class="notice-item-content">{{
          handleContent(item.content)
        }}</view>
        <view class="notice-item-content">{{
          $timestampToTime(item.createtime, 'YYYY-MM-DD')
        }}</view>
        <!-- <view class="newClass" v-if="item.newNotice == 1"></view> -->
      </view>
    </view>
    <co-load-more :type="loadingType"
      ><co-empty slot="empty" model="data" paddingTop="80rpx"></co-empty
    ></co-load-more>
  </view>
</template>

<script>
import { apiNotice } from '@/api/notice.js'
import tabbarPage from '@/mixins/tabbarPage'
import { NAV_BAR_TITLE } from '@/types/navbar.js'
import { appOnLaunch } from '@/utils/appGlobalLifeCycle'
import { navigationHeight } from '@/utils/systemInfo.js'
import { NOTICEID } from '@/types/storage'
const noRequestType = [1, 2, 3]
export default {
  data() {
    return {
      NAV_BAR_TITLE,
      navbarBackground: {
        background: 'linear-gradient(360deg, #F79128 0%, #FE6507 100%)'
      },
      navigationHeight,
      pageNum: 1,
      pageSize: 20,
      loadingType: 999,
      noticeList: []
    }
  },
  mixins: [tabbarPage],
  onShow() {
    if (!this.$store.getters.isLogin) {
      appOnLaunch()
      return
    }
    this.init()
  },
  onReachBottom() {
    this.getList()
  },
  onPullDownRefresh() {
    this.init()
  },
  methods: {
    handleContent(content) {
      let cont = content.replace(/&nbsp;/g, '\xa0')
      return cont
    },
    init() {
      this.pageNum = 1
      this.noticeList = []
      this.loadingType = 999
      this.getList()
    },
    getList() {
      if (noRequestType.includes(this.loadingType)) {
        return
      }
      let param = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      apiNotice(param)
        .then((res) => {
          console.log(res)
          let { code, data, msg } = res.data
          if (code == 200) {
            if (this.pageNum == 1) {
              let arr = uni.getStorageSync(NOTICEID) || []
              data.records.map((item) => {
                if (arr.indexOf(item.id) == -1) {
                  item.newNotice = 1
                } else {
                  item.newNotice = 0
                }
              })
            } else {
              data.records.map((item) => {
                item.newNotice = 2
              })
            }
            this.noticeList =
              this.pageNum == 1
                ? data.records
                : [...this.noticeList, ...data.records]
            if (this.pageNum == 1 && this.noticeList.length == 0) {
              this.loadingType = 1
            } else if (Math.ceil(data.total / this.pageSize) > this.pageNum) {
              this.loadingType = 999
              this.pageNum++
            } else {
              this.loadingType = 3
            }
          } else {
            this.$am_toast.warning(data.msg)
          }
          uni.stopPullDownRefresh()
        })
        .catch((err) => {
          this.$am_toast.warning('数据加载失败')
          uni.stopPullDownRefresh()
        })
    },
    goDetail(item) {
      this.$store.commit('SET_NOTICE_DATA', item.id)
      this.$u.route({
        url: '/pages/pre-sale/pre-sale-details',
        params: {
          id: item.id
        }
      })
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.navbar-slot-wrap {
  position: absolute;
  width: 750rpx;
  left: 0;
}

.navbar-title-img {
  display: block;
  width: 174rpx;
  height: 37rpx;
}

.notice-item {
  margin: 16rpx 16rpx 0;
  background-color: #fff;
  border-radius: 16rpx;
  padding-bottom: 30rpx;
  position: relative;
}

.notice-item-type {
  height: 78rpx;
  padding: 0 18rpx;
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #e8e8e8;

  image {
    width: 40rpx;
    height: 36rpx;
  }

  .notice-item-type-text {
    margin-left: 15rpx;
    font-size: 34rpx;
    font-weight: 500;
    color: #4bb019;
  }
}

.notice-item-title {
  padding: 17rpx 18rpx 24rpx;
  font-size: 30rpx;
  font-weight: 400;
  color: #000000;
  display: flex;
  align-items: center;

  image {
    width: 40rpx;
    height: 36rpx;
  }

  .notice-item-title-text {
    flex: 1;
  }
}

.notice-item-content {
  font-size: 26rpx;
  font-weight: 400;
  color: #666666;
  line-height: 37rpx;
  padding: 0 18rpx;
  @include amOverLineClamp(2);
  margin-top: 15rpx;
}

.newClass {
  position: absolute;
  right: 0rpx;
  top: 0rpx;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background: red;
}
</style>
